<template>
  <el-dialog
    v-model="visible"
    title="Prompt Text"
    width="800px"
    align-center
    :show-close="false"
    :before-close="hideDialog"
  >
    <div class="content">
      <v-md-editor :model-value="promptText" mode="preview" ref="preview"></v-md-editor>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="success" @click="hideDialog">Close</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { watch, ref } from 'vue'

// 定义 Props
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
  promptText: {
    type: String,
    required: true,
  },
})
// 定义 Emits
const emit = defineEmits(['update:modelValue'])
const visible = ref(props.modelValue)

// 监听 modelValue 的变化
watch(
  () => props.modelValue,
  (newValue) => {
    visible.value = newValue
  },
)
// 隐藏弹窗
const hideDialog = () => {
  visible.value = false
  emit('update:modelValue', false) // 更新父组件的状态
}
</script>

<style lang="scss" scoped>
/* 关于el-dialog的样式修改在父容器的样式文件中 */
.content {
  height: 630px;
  overflow: auto;
}
.dialog-footer {
  :deep(.el-button) {
    width: 85px;
    height: 44px;
    background-color: #0fcb8c;
    color: #0a2b35;
    font-size: 21px;
  }
}
</style>
